<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NapCat - WebUi</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f2f5;
        }

        .login-container {
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: white;
            max-width: 400px;
            min-width: 300px;
            position: relative;
        }

        .login-methods {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .login-method {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .login-method.active {
            background-color: #e6f0ff;
            color: #007BFF;
        }

        .login-form,
        .qrcode {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .qrcode {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            text-align: center;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }

        .hidden {
            display: none;
        }

        #qrcode-canvas {
            width: 200px;
            height: 200px;
        }

        #quick-login-dropdown {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            outline: none;
            transition: all 0.3s;
        }

        #quick-login-dropdown:hover {
            background-color: #e6f0ff;
        }

        #quick-login-options {
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            display: none;
        }

        #quick-login-options.show {
            display: block;
        }

        .quick-login-option {
            padding: 10px 15px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .quick-login-option:hover {
            background-color: #e6f0ff;
        }

        #quick-login-select {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
            transition: all 0.3s;
        }

        #quick-login-select option {
            background-color: #fff;
            color: #333;
        }
    </style>
    <script src="./assets/qrcode.min.js"></script>
</head>

<body>
    <div class="login-container">
        <h2>Login</h2>
        <div class="login-methods">
            <button id="quick-login" class="login-method active">Quick Login</button>
            <button id="qrcode-login" class="login-method">QR Code</button>
        </div>
        <div id="quick-login-dropdown" class="login-form">
            <select id="quick-login-select" onchange="selectAccount(this.value)">
                <option value="">Select Account</option>
            </select>
        </div>
        <div id="qrcode" class="qrcode" style="display: none;">
            <canvas id="qrcode-canvas"></canvas>
        </div>
        <p id="message"></p>
    </div>
    <script>
        async function GetQQLoginQrcode(retCredential) {
            let QQLoginResponse = await fetch('/api/QQLogin/GetQQLoginQrcode', {
                method: 'POST',
                headers: {
                    'Authorization': "Bearer " + retCredential,
                    'Content-Type': 'application/json'
                }
            });
            if (QQLoginResponse.status == 200) {
                let QQLoginResponseJson = await QQLoginResponse.json();
                if (QQLoginResponseJson.code == 0) {
                    if (QQLoginResponseJson.data.qrcode) {
                        return QQLoginResponseJson.data.qrcode;
                    } else {
                        return "";
                    }
                }
            }
            return "";
        }
        async function CheckQQLoginStatus(retCredential) {
            let QQLoginResponse = await fetch('/api/QQLogin/CheckLoginStatus', {
                method: 'POST',
                headers: {
                    'Authorization': "Bearer " + retCredential,
                    'Content-Type': 'application/json'
                }
            });
            if (QQLoginResponse.status == 200) {
                let QQLoginResponseJson = await QQLoginResponse.json();
                if (QQLoginResponseJson.code == 0) {
                    if (QQLoginResponseJson.data.isLogin) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
            return false;
        }
        async function GetQQQucickLoginList(retCredential) {
            let QQLoginResponse = await fetch('/api/QQLogin/GetQuickLoginList', {
                method: 'POST',
                headers: {
                    'Authorization': "Bearer " + retCredential,
                    'Content-Type': 'application/json'
                }
            });
            if (QQLoginResponse.status == 200) {
                let QQLoginResponseJson = await QQLoginResponse.json();
                if (QQLoginResponseJson.code == 0) {
                    return QQLoginResponseJson?.data;
                }
            }
            return [];
        }
        async function SetQuickLogin(uin, retCredential) {
            let QQLoginResponse = await fetch('/api/QQLogin/SetQuickLogin', {
                method: 'POST',
                headers: {
                    'Authorization': "Bearer " + retCredential,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    uin: uin
                })
            });
            if (QQLoginResponse.status == 200) {
                let QQLoginResponseJson = await QQLoginResponse.json();
                if (QQLoginResponseJson.code == 0) {
                    return { result: true, errMsg: "" };
                } else {
                    return { result: false, errMsg: QQLoginResponseJson.message };
                }
            }
            return { result: false, errMsg: "接口异常" };;
        }
        //心跳轮询CheckQQLoginStatus 是否已经进入登录状态，如果为true进入./config.html
        async function HeartBeat() {
            let isLogined = await CheckQQLoginStatus(localStorage.getItem('auth'));
            if (isLogined) {
                window.location.href = './config.html';
            }
        }
        async function InitPages() {
            let QuickLists = await GetQQQucickLoginList(localStorage.getItem('auth'));
            let QuickListSelect = document.querySelector("#quick-login-select");
            QuickLists.forEach(QuickUin => {
                let optionUinEle = document.createElement('option');
                optionUinEle.innerHTML = QuickUin;
                optionUinEle.value = QuickUin;
                QuickListSelect.appendChild(optionUinEle);
            });
            generateQrCode(await GetQQLoginQrcode(localStorage.getItem('auth')), document.querySelector('#qrcode-canvas'));
            setInterval(HeartBeat, 3000);
        }
        document.getElementById('quick-login').addEventListener('click', function () {
            let quickLoginOptions = document.querySelector('#quick-login-dropdown');
            let qrcode = document.querySelector('#qrcode');
            quickLoginOptions.style.display = 'flex';
            qrcode.style.display = 'none';
        });

        async function selectAccount(accountName) {
            //alert(`Logging in with ${accountName}...`);
            const { result, errMsg } = await SetQuickLogin(accountName, localStorage.getItem('auth'));
            if (result) {
                alert("登录成功即将跳转");
                window.location.href = './config.html';
            } else {
                alert("登录失败," + errMsg);
            }
            //await (localStorage.getItem('auth'))
            //document.getElementById('quick-login-options').classList.remove('show');
        }
        document.getElementById('qrcode-login').addEventListener('click', function () {
            let loginForm = document.querySelector('#quick-login-dropdown');
            let qrcode = document.querySelector('#qrcode');
            loginForm.style.display = 'none';
            qrcode.style.display = 'flex';
        });

        function generateQrCode(data, canvas) {
            QRCode.toCanvas(canvas, data, function (error) {
                if (error) console.error(error);
                console.log('QR Code generated!');
            });
        }
        InitPages();
    </script>
</body>

</html>